<template>
    <div class="tag-item" :style="`background-color:${color}`">
        {{ name }}
    </div>
</template>
<script setup>
import {ref,onMounted} from "vue"
import {randomColor} from "@/utils/timeInterval.js"
defineProps({
    name:{
        type:String
    }
})
let color = ref();
onMounted(()=>{
    color.value = `rgb(${randomColor()} ${randomColor()} ${randomColor()})`
    setInterval(()=>{
        color.value = `rgb(${randomColor()} ${randomColor()} ${randomColor()})`
    },3000)
})
</script>
<style lang="scss" scoped>
    .tag-item {
        padding:5px;
        border-radius: 5px;
        transition: all .5s ease-out;
        margin-right: 10px;
        margin-bottom: 10px;
        color:#fff;
        &:hover {
            background-color: #000!important;
            border-radius: 0;
        }
    }
</style>